<script setup>
import { ref, onMounted } from 'vue'
import { newPictures } from '@/api/news.js'
import { userUpdateMyService, userGetMyService } from '@/api/user.js'
const dialogVisible = ref(false)
const emit = defineEmits(['get-message'])

// 初始化数据
const formModel = ref({
  nickname: '',
  avatar: '',
  gender: '男',
  age: '999',
  email: '',
  signature: ''
})
const rules = {
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '用户昵称必须是 1-10 位的非空字符',
      trigger: 'blur'
    }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    {
      pattern: /^[0-9]{1,3}$/,
      message: '年龄必须是 1-3 位的数字',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: '请输入正确的邮箱账号',
      trigger: 'blur'
    }
  ]
}

// 图片
const onSelectImg = async (uploadFile) => {
  const file = new FormData()
  file.append('file', uploadFile.raw)
  const res = await newPictures(file)
  formModel.value.avatar = res.data
}

// 更新数据
const onSubmit = async () => {
  await userUpdateMyService(formModel.value)
  emit('get-message', true)
  dialogVisible.value = false
}

// 数据初始化
onMounted(async () => {
  const res = await userGetMyService()
  formModel.value = res.data.data
  console.log(formModel.value.avatar)
})

const open = async () => {
  dialogVisible.value = true
}

defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="更改个人信息" width="30%">
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="rules"
      label-width="100px"
      style="padding-right: 30px"
    >
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="formModel.nickname" placeholder="请输入用户昵称"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="onSelectImg"
        >
          <img v-if="formModel.avatar" :src="formModel.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select
          style="width: 100%"
          v-model="formModel.gender"
          placeholder="请选择性别"
        >
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="formModel.age" placeholder="请输入年龄"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formModel.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="个性标签" prop="signature">
        <el-input v-model="formModel.signature" placeholder="请输入个性签名"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
</style>
